<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css">
        #big{
            width: 500px;
            height: 300px;
            border: 1px solid gray;
        }
        #small{
            width: 200px;
            height: 100px;
            border: 2px solid gray;
            background-color: aqua;
            margin: 0 auto;;
            margin-top: 100px;
        }
        .one{
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform:  rotate(10deg);
        }
        .two{
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
            -o-transform: rotate(20deg);
            transform:  rotate(20deg);
        }
        .three{
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform:  rotate(30deg);
        }
        .four{
            -webkit-transform: rotate(40deg);
            -moz-transform: rotate(40deg);
            -ms-transform: rotate(40deg);
            -o-transform: rotate(40deg);
            transform:  rotate(40deg);
        }
        .five{
            -webkit-transform: rotate(50deg);
            -moz-transform: rotate(50deg);
            -ms-transform: rotate(50deg);
            -o-transform: rotate(50deg);
            transform:  rotate(50deg);
        }
        .six{
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
            transform:  rotate(60deg);
        }
        .seven{
            -webkit-transform: rotate(70deg);
            -moz-transform: rotate(70deg);
            -ms-transform: rotate(70deg);
            -o-transform: rotate(70deg);
            transform:  rotate(70deg);
        }
        .eight{
            -webkit-transform: rotate(80deg);
            -moz-transform: rotate(80deg);
            -ms-transform: rotate(80deg);
            -o-transform: rotate(80deg);
            transform:  rotate(80deg);
        }
        .night{
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform:  rotate(90deg);
        }
        .ten{
            -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
            -o-transform: rotate(100deg);
            transform:  rotate(100deg);
        }
        .tenone{
            -webkit-transform: rotate(110deg);
            -moz-transform: rotate(110deg);
            -ms-transform: rotate(110deg);
            -o-transform: rotate(110deg);
            transform:  rotate(110deg);
        }
        .tentwo{
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -o-transform: rotate(120deg);
            transform:  rotate(120deg);
        }
    </style>
</head>
<body>
<form action="#" method="post" >
    <input type="radio" value="rotate(10deg)" name="translate" id="one"/>
    <label for="one">rotate(10deg)</label><br/>
    <input type="radio" value="rotate(20deg)" name="translate" id="two"/>
    <label for="two">rotate(20deg)</label><br/>
    <input type="radio" value="rotate(30deg)" name="translate" id="three"/>
    <label for="three">rotate(30deg)</label><br/>
    <input type="radio" value="rotate(40deg)" name="translate" id="four"/>
    <label for="four">rotate(40deg)</label><br/>
    <input type="radio" value="rotate(50deg)" name="translate" id="five"/>
    <label for="five">rotate(50deg)</label><br/>
    <input type="radio" value="rotate(60deg)" name="translate" id="six"/>
    <label for="six">rotate(60deg)</label><br/>
    <input type="radio" value="rotate(70deg)" name="translate" id="seven"/>
    <label for="seven">rotate(70deg)</label><br/>
    <input type="radio" value="rotate(80deg)" name="translate" id="eight"/>
    <label for="eight">rotate(80deg)</label><br/>
    <input type="radio" value="rotate(90deg)" name="translate" id="night"/>
    <label for="eight">rotate(90deg)</label><br/>
    <input type="radio" value="rotate(100deg)" name="translate" id="ten"/>
    <label for="eight">rotate(100deg)</label><br/>
    <input type="radio" value="rotate(110deg)" name="translate" id="tenone"/>
    <label for="eight">rotate(110deg)</label><br/>
    <input type="radio" value="rotate(120deg)" name="translate" id="tentwo"/>
    <label for="eight">rotate(120deg)</label><br/>
</form>
<div id="big">
    <div id="small">

    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("input").click(function () {
            $("#small").removeClass();
            var inp=$(this).attr("id");
            $("#small").addClass(inp);
        });
    });

</script>
</body>
</html>